<template>
  <div class="page-home">
    <div class="searchbar" @click="handleSearch">
      <van-search disabled placeholder="O que procuras?" background="#f2f2f2" show-action>
        <template #action>
          <van-button size="small" icon="search" color="#fb7924" />
        </template>
      </van-search>
    </div>
    <cu-classify />
    <div class="title">Anúncios recomendados</div>
    <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="" @load="loadData">
      <GoodsGrid :show-favorite="false" :list="recommend" />
    </van-list>
  </div>
</template>
<script>
import GoodsGrid from "@/components/goods-grid";
import CuClassify from "@/components/classify";
import Api from "@/api";
import { Domain } from "@/constants";
export default {
  name: "Home",
  components: { GoodsGrid, CuClassify },
  data() {
    return {
      loading: false,
      finished: false,
      params: {
        pageSize: 10,
        pageNo: 0,
        tag: 2,
      },
      recommend: [],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData(isMore = false) {
      this.params.pageNo += 1;
      Api.goodsList(this.params).then((res) => {
        const newList = res.rows.map((item) => {
          const img = item.imgList ? JSON.parse(item.imgList)[0] : "";
          return Object.assign(item, { showImg: Domain + img });
        });
        if (this.params.pageSize * this.params.pageNo >= res.total) {
          this.loading = false;
          this.finished = true;
        }
        if (this.params.pageNo > 1) {
          this.recommend = this.recommend.concat(newList);
        } else {
          this.recommend = newList;
        }
      });
    },
    handleSearch() {
      this.$router.push("/search");
    },
  },
};
</script>
<style lang="less" scoped>
.page-home {
  box-sizing: border-box;
  padding-top: 66px;
  .searchbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 16px;
    box-sizing: border-box;
    height: 66px;
    background: #f2f2f2;
    .van-search__action {
      padding: 0;
      line-height: 0;
    }
  }
  .title {
    color: #333;
    font-size: 18px;
    font-weight: bold;
    padding: 20px 15px;
  }
}
</style>
